<template>
  <el-container direction="vertical">
    <!-- <div @click.stop="clic" class="cu row el-alert el-alert--info is-light" v-show="isphone">
            <div class="col">
                <el-icon :style="{ transform: 'translateY(-1px)' }">
                    <warning-filled />
                </el-icon>
                {{ title }}
            </div>
            <div @click.stop="isphone = false" :style="{ width: '40px' }">
                <el-icon>
                    <Close />
                </el-icon>
            </div>
        </div>
        <HeadNav ref="headnav" :icon="myteam.other?.saasTeamLogo ? myteam.other?.saasTeamLogo : ''" :myteam="myteam">
        </HeadNav> -->
    <router-view class="main" v-if="show" v-slot="{ Component }">
      <!-- Home -->
      <keep-alive :max="10" :include="['']">
        <component :is="Component" />
      </keep-alive>
      <!-- <keep-alive :max="10" :include="['questionbankindex', 'questionindex', 'Home']">
                <component :is="Component" />
            </keep-alive> -->
    </router-view>
  </el-container>
</template>

<script setup lang="ts">
import { ElNotification } from "element-plus";
import { computed, onMounted, provide, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
const show = ref(false);
const store = useStore(Storekey);
const code = ref<{
  error: number;
  msg?: string;
  data?: Studycodemodel.Iuserquestioninfo[];
  run?: true;
}>();
const socket = computed(() => {
  return store.state.socket;
});

const headnav = ref();

provide("headnav", headnav);
provide("headnavdialogVisible", () => {
  headnav.value.shoudialogVisible("登录");
  return true;
});
provide("runcode", () => {
  code.value = undefined;
  return true;
});
provide("getcode", code);

const router = useRouter();
const user = computed(() => {
  return store.state.user;
});

const isphone = ref(false);
const title = ref("您还没有绑定手机号，无法收到通知信息，可点击绑定");
watch(
  () => user.value,
  (v) => {
    if (v && !v.phonenum) {
      isphone.value = true;
    }
  }
);

onMounted(async () => {
  // 先刷新登录信息后校验团队id
  await store.dispatch("actiononline");
  // if (!user.value) {
  //     console.error("actiononline user is undefined", user.value)
  //     router.push({
  //         name: "登录",
  //         query: {
  //             redirect: router.currentRoute.value.fullPath // 记录当前页面路径
  //         }
  //     });
  //     return;
  // }
  // math不 判断团队
  // await compareTeamId()
  // await store.dispatch('actionarticle')
  // await store.dispatch('actionlabel')
  show.value = true;
  if (socket.value) {
    store.dispatch("actiontime");
    const v = socket.value;
    v.on("runcode", (data) => {
      code.value = data;
    });
    v.on("notification", (data) => {
      const { title, context, type } = data;
      ElNotification({
        title,
        message: context,
        type,
      });
    });
  }
  // 路由权限校验
  permissions();
});

// 路由权限校验
function permissions() {
  router.beforeEach(async (to, from, next) => {
    try {
      // 同一页面 query不同  不走online
      if (from.name === to.name) {
        console.log("from.name:", from.name, "to.name:", to.name);
        return next();
      }
      // 可以不登录查看比赛信息
      // if (to.path !== '/login') {
      //     console.log("beforeEach actiononline")
      //     const onlineRet = await store.dispatch('actiononline')
      //     if (!onlineRet) {
      //         console.log("actiononline return", onlineRet)
      //         return next('/login') // 使用 return 确保只调用一次 next
      //     }
      // }
      next();
    } catch (error) {
      console.error("beforeEach onlineRet error", error);
      next("/login");
    }
  });
}

// watch(() => user.value, async (v) => {
//     if (v) {
//         await store.dispatch('actionteam', { userid: v.ID })
//         const team = store.state.team?.rows.find(e => e.color)
//         myteam.value = { ID: team?.ID, name: team?.name, color: team?.color, other: team?.other }
//         // mystyle.css.value = `:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`
//         mystyle.css.value = `:root {
//                  --color-cheng: var(--sass-color-blue);
//                 --color-cheng2: var(--sass-color-blue2);
//                 --color-cheng3: var(--sass-color-blue3) }`
//     } else {
//         store.commit(SET_TEAM, null);
//     }
// })

defineExpose({
  title,
  isphone,
});
</script>

<style scoped></style>

<style>
/* html,
body,
#app {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

:root {
    --color--cheng2: #d96248;
    --color--cheng3: #b34532;
    --color--cheng: #ff8461;
}

#app {
    position: relative;
}

#app button:focus {
    outline: 0px !important;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

pre {
    margin: 0.5em 0;
    padding: 0.3em 0.5em;
    border: #ddd solid 1px;
    background: #f8f8f8;
    border-radius: 3px;
    overflow: auto;
    font-size: 0.875em;
    font-family: monospace;
    min-height: 30px;
}

a:hover {
    text-decoration: none;
}

.table tr td {
    font-size: 15px;
}

.text-00c8a5 {
    color: var(--color-cheng) !important;
}

.bg-00c8a5 {
    background-color: var(--color-cheng) !important;
    color: #fff;
} */
</style>
